<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>修改密码</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="/css/mdui.min.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <link rel="stylesheet" href="/css/mdclub.css"/>
</head>

<div th:include="common/adheader::header"></div>
<div class="mdui-container mdui-p-x-2">
    <div class="mdui-card mdui-card-shadow mdui-p-x-2" id="edit_pwd">
        <div class="mdui-textfield">
            <label class="mdui-textfield-label">旧密码</label>
            <input class="mdui-textfield-input" type="old_password" v-model="old_password" required/>
        </div>
        <div class="mdui-textfield">
            <label class="mdui-textfield-label">密码</label>
            <input class="mdui-textfield-input" type="password" v-model="password" required/>
        </div>
        <div class="mdui-textfield">
            <label class="mdui-textfield-label">再次输入密码</label>
            <input class="mdui-textfield-input" type="password" v-model="password2" required/>
        </div>
        <button class="mdui-fab mdui-fab-fixed mdui-color-theme-accent mdui-ripple" @click="update"><i class="mdui-icon material-icons">save</i></button>
    </div>
</div>
<div th:include="common/adfooter::footer"></div>
<script>
    let edit_pwd = new Vue({
        el: '#edit_pwd',
        data: {
            old_password: '',
            password: '',
            password2: ''
        },
        methods: {
            update: function(){
                if(this.password === this.password2){
                    fetch('/admin/passwd',{
                        method: 'POST',
                        headers: {
                        'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                            old_password:this.old_password,
                            password : this.password,
                        }),
                    })
                        .then(response => response.json())
                        .then(json => {
                            mdui.snackbar(json.data)
                        })
                }else{
                    mdui.snackbar('两次密码不一致')
                }
            }
        }
    });
</script>
